<template>
  <div class="app-container">
    <div v-if="account">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <account-card :account="account" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="信息修改" name="account">
                <account-info :account="account" @update-account="updateAccount" />
              </el-tab-pane>
              <el-tab-pane label="密码修改" name="password">
                <password :account="account" @update-psd="updatePsd" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AccountCard from './components/AccountCard'
import AccountInfo from './components/AccountInfo'
import Password from './components/Password'
import { getAccountData, modifyAccountPsd, modifyAccount } from '@/api/account'
import store from '@/store'

export default {
  name: 'Account',
  components: { AccountCard, AccountInfo, Password },
  data() {
    const IMAGE_FILE_NAME = 'userImage'
    return {
      activeTab: 'account',
      accountQueryList: {
        account: store.getters.token
      },
      account: {},
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getAccountData(this.accountQueryList)
        .then(response => {
          const account = response.accountInfo
          if (account.image === '') {
            account.image = this.imgUrl + '/' + 'default.jpg'
          } else {
            account.image = this.imgUrl + '/' + account.image
          }
          this.account = account
          this.account.role = response.role
        })
        .catch(error => {
          console.log(error)
        })
    },
    async updateAccount(params) {
      const res = await modifyAccount(params)
      if (res) {
        Object.assign(this.account, params)
        this.$message({
          type: 'success',
          message: '修改成功！'
        })
      }
    },
    async updatePsd(params) {
      const res = await modifyAccountPsd(params)
      if (res) {
        this.$message({
          type: 'success',
          message: '修改成功！'
        })
      }
    }
  }
}
</script>
<style scoped>
>>> .el-form-item {
  margin-bottom: 0;
}
</style>
